<template>
    <div class="real-time-order-status">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>实时订单状态</span>
        </div>
        
        <el-form :inline="true" :model="queryForm" label-width="120px">
          <el-form-item label="订单编号">
            <el-input v-model="queryForm.orderId" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          
          <el-form-item label="客户名称">
            <el-input v-model="queryForm.customerName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        
        <div class="chart-container">
          <div class="chart-row">
            <div class="chart-item">
              <div ref="pcbaChart" class="chart"></div>
              <div class="chart-info">
                <div class="info-row">
                  <span class="label">订单数量:</span>
                  <span class="value">{{ chartData.pcba.total }}</span>
                </div>
                <div class="info-row">
                  <span class="label">完成数量:</span>
                  <span class="value">{{ chartData.pcba.completed }}</span>
                </div>
              </div>
            </div>
            
            <div class="chart-item">
              <div ref="wholeFlowChart" class="chart"></div>
              <div class="chart-info">
                <div class="info-row">
                  <span class="label">订单数量:</span>
                  <span class="value">{{ chartData.wholeFlow.total }}</span>
                </div>
                <div class="info-row">
                  <span class="label">完成数量:</span>
                  <span class="value">{{ chartData.wholeFlow.completed }}</span>
                </div>
              </div>
            </div>
            
            <div class="chart-item">
              <div ref="wholeOutChart" class="chart"></div>
              <div class="chart-info">
                <div class="info-row">
                  <span class="label">订单数量:</span>
                  <span class="value">{{ chartData.wholeOut.total }}</span>
                </div>
                <div class="info-row">
                  <span class="label">完成数量:</span>
                  <span class="value">{{ chartData.wholeOut.completed }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="pcba-data-table">
          <h3>PCBA检测数据</h3>
          <el-table :data="pcbaTableData" border height="300">
            <el-table-column prop="internalCode" label="内条码"></el-table-column>
            <el-table-column prop="testTime" label="检测时间"></el-table-column>
            <el-table-column prop="testResult" label="检测结果">
              <template slot-scope="scope">
                <el-tag :type="scope.row.testResult === '成功' ? 'success' : 'danger'">
                  {{ scope.row.testResult }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import { getPieChartOptions } from '@/utils/chartOptions';
  
  export default {
    name: 'RealTimeOrderStatus',
    data() {
      return {
        queryForm: {
          orderId: '',
          customerName: ''
        },
        chartData: {
          pcba: {
            total: 100,
            completed: 85
          },
          wholeFlow: {
            total: 85,
            completed: 70
          },
          wholeOut: {
            total: 70,
            completed: 65
          }
        },
        pcbaTableData: [
          {
            internalCode: 'IN1234567890',
            testTime: '2023-11-01 10:30:45',
            testResult: '成功'
          },
          {
            internalCode: 'IN1234567891',
            testTime: '2023-11-01 10:35:45',
            testResult: '失败'
          },
          {
            internalCode: 'IN1234567892',
            testTime: '2023-11-01 10:40:45',
            testResult: '成功'
          }
        ],
        pcbaChart: null,
        wholeFlowChart: null,
        wholeOutChart: null
      };
    },
    mounted() {
      this.initCharts();
      this.updateCharts();
    },
    beforeDestroy() {
      if (this.pcbaChart) {
        this.pcbaChart.dispose();
      }
      if (this.wholeFlowChart) {
        this.wholeFlowChart.dispose();
      }
      if (this.wholeOutChart) {
        this.wholeOutChart.dispose();
      }
    },
    methods: {
      initCharts() {
        this.pcbaChart = echarts.init(this.$refs.pcbaChart);
        this.wholeFlowChart = echarts.init(this.$refs.wholeFlowChart);
        this.wholeOutChart = echarts.init(this.$refs.wholeOutChart);
        
        // 设置图表自适应
        window.addEventListener('resize', this.resizeCharts);
      },
      
      resizeCharts() {
        if (this.pcbaChart) {
          this.pcbaChart.resize();
        }
        if (this.wholeFlowChart) {
          this.wholeFlowChart.resize();
        }
        if (this.wholeOutChart) {
          this.wholeOutChart.resize();
        }
      },
      
      updateCharts() {
        const pcbaOption = getPieChartOptions(
          'PCBA检测',
          ['完成', '未完成'],
          [this.chartData.pcba.completed, this.chartData.pcba.total - this.chartData.pcba.completed]
        );
        
        const wholeFlowOption = getPieChartOptions(
          '整表测试台检测',
          ['完成', '未完成'],
          [this.chartData.wholeFlow.completed, this.chartData.wholeFlow.total - this.chartData.wholeFlow.completed]
        );
        
        const wholeOutOption = getPieChartOptions(
          '整表出厂测试检测',
          ['完成', '未完成'],
          [this.chartData.wholeOut.completed, this.chartData.wholeOut.total - this.chartData.wholeOut.completed]
        );
        
        this.pcbaChart.setOption(pcbaOption);
        this.wholeFlowChart.setOption(wholeFlowOption);
        this.wholeOutChart.setOption(wholeOutOption);
      },
      
      handleQuery() {
        // 模拟查询操作，可以根据 queryForm 的值筛选数据
        this.updateCharts();
      },
      
      resetForm() {
        this.queryForm = {
          orderId: '',
          customerName: ''
        };
        this.updateCharts();
      }
    }
  };
  </script>
  
  <style scoped>
  .real-time-order-status {
    padding: 20px;
  }
  
  .chart-container {
    margin-top: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .chart-item {
    width: 32%;
  }
  
  .chart-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .chart {
    height: 250px;
    width: 100%;
  }
  
  .chart-info {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  
  .label {
    font-weight: bold;
  }
  
  .value {
    color: #67c23a;
  }
  
  .pcba-data-table {
    margin-top: 20px;
  }
  
  .pcba-data-table h3 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  
  ::v-deep .el-table {
    width: 100%;
  }
  
  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }
  
  .empty-data {
    text-align: center;
    padding: 60px 0;
  }
  </style>